<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .earthrotate{
            width: 310px;
            height: 310px;
            /* 设置背景图 */
            background-image: url("images/微信图片_20210203162514.png");
            border-radius: 50%;/*让其边框变成为圆形*/
            /* 设置坐标系 */
            position: relative;
            /* 创建动画，设置参数
                run是一个关键帧  4s执行时间 infinite循环执行
                速度不均匀，不同一，默认前快后慢 解决的方法linear
             */
            animation: run 4s linear infinite ;
        }
        .earthrotate:hover{
            /* 鼠标移入，地球暂停旋转，鼠标移除，继续旋转 
             animatioin-play-state 判断旋转状态
             paused 暂停
            */
            animation-play-state: paused ;
        }
        /* 定义关键帧 
            变形（形状的变化）
            rotate 旋转，0deg 从0°开始 到360°结束
        */
        @keyframes run {
            from{transform:rotate(0deg);}
            to{transform: rotate(360deg);}
        }

    </style>
</head>
<body>
    <h3>地球旋转动画效果</h3>
    <div class="earthrotate"></div>
</body>
</html>